<template>
  <div class='bigconer'>
  <!--购物车小球动画,通过钩子函数实现-->
  <transition
  @before-enter='beforeEnter'
  @enter='enter'
  @after-enter='afterEnter'>
  <div class='shoppcar' v-show='flag' ref='ball'></div>  
  </transition>
  <!--卡片区域使用的是mui中的card.html-->
    <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
					<swiper :lunbotu='lunbotu' :full='false'></swiper>
					</div>
				</div>
			</div>

			<div class="mui-card">
				<div class="mui-card-header">{{info.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>市场价:<del>￥{{info.market_price}}</del>&nbsp;&nbsp;销售价<span class='sell_price'>￥{{info.sell_price}}</span></p>
						<p>购买数量:
						<!--这个地方使用的是mui中的numbox.html-->
					  <numbox @getshoppvalue='getshoppvalue' :max='info.stock_quantity'></numbox>
						<!--由于页面一上来加载的时候在created里调用了方法来发送ajax请求数据，而ajax是异步的，请求数据的同时页面模板也是从上往下依次渲染
						所以这里进行属性绑定的时候max获得的属性值是undefined因为模板被渲染的时候数据还没有被请求过来
						-->					  
						</p>
						<mt-button type='primary' size='small'>立即购买</mt-button>
						<mt-button type='danger' size='small' @click='addshoppcar'>加入购物车</mt-button>						
					</div>
				</div>
			</div>

            <div class="mui-card">
				<div class="mui-card-header">{{info.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号:{{info.goods_no}}</p>
						<p>库存情况:{{info.stock_quantity}}</p>
						<p>上架时间:{{info.add_time|dateFormat}}</p>												
					</div>
				</div>
				<div class="mui-card-footer">
				<mt-button type='primary' size='large' plain @click='gooddesc'>图文介绍</mt-button>
				<mt-button type='danger' size='large' plain @click='goodcomment'>商品评论</mt-button>				
				</div>
			</div>
  </div>
</template>

<script>
import swiper from '../subcomponent/swiper.vue'
import numbox from '../subcomponent/goodinfo_numbox.vue'

export default{
data(){
	return{
		lunbotu:[],
		id:this.$route.params.id,
		info:{},
		flag:false,
		val:1//默认是有一件商品从子组件中传过来的用户要购买的商品数量
	}
	},
	created(){
		this.getlunbotu()
		this.getinfo()
		
	},
methods:{
    getlunbotu(){
	this.$http.get('api/getthumimages/'+this.id).then(result=>{
			if(result.body.status==0){
				// this.lunbotu=result.body.message
				result.body.message.forEach((item,i)=>{
					item.img=item.src//因为轮播图组件内部使用的是lunbotu数组中的item.img
				})
				this.lunbotu=result.body.message
			}
		})
	},

		getinfo(){
		this.$http.get('api/goods/getinfo/'+this.id).then(result=>{
			if(result.body.status==0){
				this.info=result.body.message[0]
			}
		})
	},
	gooddesc(){
		//vue-router中的编程式导航中的通过js操作路由的方式，以及对应的路由规则怎么配置通过name属性来匹配
		this.$router.push({name:'gooddesc',params:{id:this.id}})
	},
	goodcomment(){
		this.$router.push({name:'goodcomment',params:{id:this.id}})
	},
	//动画元素显示隐藏切换的时候才会触发以下钩子函数
	beforeEnter(el){
		//动画开始时候的操作
		//el代表的就是动画元素
		el.style.transform='translate(0,0)'//transform是相对于自身的左上角坐标的，这里的0，0表示在自己刚开始所在的位置
	},
	enter(el,done){
		//动画结束时候的操作
		el.offsetWidth//必须加上这一句
		//getBoundingClientRect方法能够获取页面中的dom元素距离屏幕的四边的距离
		const ball=this.$refs.ball.getBoundingClientRect()
		const shoppnum=document.getElementById('shoppnum').getBoundingClientRect()//只要是当前页面中的dom元素在哪儿都可以进行获取操作
		const shiftX=shoppnum.left-ball.left
		const shiftY=shoppnum.top-ball.top
		el.style.transform=`translate(${shiftX}px,${shiftY}px)`//使用模板字符串
		el.style.transition='all .5s cubic-bezier(.26,-0.21,1,.34)'
		done()//是调用afterEnter的意思
	},
	afterEnter(el){
		this.flag=!this.flag
	},
	addshoppcar(){
		this.flag=!this.flag
		var carobj={//用户点击加入购物车的时候需要传入的东西
			id:this.id,//当前商品id
			count:parseInt(this.val),//当前商品用户想购买的数量,因为不知道用户会不会输入文字所以调用parseInt取整一下
			price:this.info.sell_price,//当前商品的销售价格
			selected:true//既然用户点击了加入购物车就表示想买所以默认是选中状态
		}
		//把从商品详情页上获取的信息carobj通过vuex状态管理库来管理这些需要在不同组件中共享的数据
		this.$store.commit('addtoshoppcar',carobj)//这里的当前组件this通过作用域找到父作用域vm实例上找到方法addtoshoppcar调用，并且把获取到的数据carobj当作参数传递过去
	},
	getshoppvalue(val){
		//这个方法是子组件来调用
		this.val=val
	}
 },
	components:{
		swiper,
		numbox,
	}
}
</script>

<style lang="scss" scoped>
.bigconer{
    background-color:#eee;
    overflow:hidden;
}
.sell_price{
	color:red;
	font-weight:bold;
}
.mui-card-footer{
	/*mui框架内部使用了display:flex;这里需要清除*/
	display:block;
	button{
		margin: 15px 0;
	}
}
.shoppcar{
	width: 15px;
    height: 15px;
    background-color: red;
    position: absolute;
    border-radius: 50%;
    left: 140px;
    top: 390px;
    z-index: 99;
}
</style>
